<script setup lang="tsx">
import {
  ref,
  toRefs,
  computed,
  watch,
  onMounted,
  onUnmounted,
  onBeforeMount,
  defineEmits,
  unref,
} from "vue";
import { isFunction, isBoolean } from "lodash-es";
import DeviceMark from "../device-mark/index.vue";
import { alertGradeOptions } from "./data";
import { getRtsp } from "@/api/screen/equipment";
import { formatDuration } from "./utils";
import { UseTab } from "@/stores/tab";
import { getAlertMessageDetail } from "@/api/alert";
import { useAlertDetailStore } from "@/stores/alertDeail";
import { requireImgUrl } from "@/utils/localurl/metaUrl";
// import {
//   executeGatewayControl,
//   getEqByCode,
//   getEqControlItem,
//   getEqDetails,
// } from "@/api/equipment";
import emits from "@/utils/emits";
import { ElMessage } from "element-plus";
import { UseModel } from "@/stores/model";
import { addDialog, closeDialog } from "@/components/redialog";
import { useLocationEq } from "@/stores/getEqByLocation";
import "@/components/redialog/style/alertDialog.scss";
import CustomPopover from "./CustomPopover.vue";
import { storeToRefs } from "pinia";
import { useFullScreenCard } from "@/stores/slg/fullscreencard";
const uf = useFullScreenCard(); //控制tarbar组件显示页面
import pointErrorBox from "./pointErrorBox.vue";
import { getGeneralValues } from "@/api/general";
import { usehidenStore } from "@/stores/hidenEdit";
const { setShowReConnect } = usehidenStore();
const triggerButton = ref();
const showPopover = ref(false);
const popoverPosition = ref({ top: 0, left: 0 });

const togglePopover = () => {
  if (eqModel.value == "鹰眼" && Model.value == "dashboard") {
    uf.setHKARShow(true);
    setShowReConnect(false);
    return;
  }
  console.log("AAAA", popoverVisible.value);
  showPopover.value = !showPopover.value;
  popoverVisible.value = !popoverVisible.value;
  console.log(popoverVisible.value == true);

  if (
    popoverVisible.value == true &&
    showDetail.value == false &&
    activated.value &&
    wsMsg.value.length <= 2
  ) {
    showDetail.value = true;
    msg.value = wsMsg.value[0];
    console.log(msg.value);
  }
  if (activated.value && wsMsg.value.length <= 2) {
    chooseItem(wsMsg.value[0].alertMessageId);
  }
  if (showPopover.value) {
    showAi.value = false;
    calculatePopoverPosition();
    showVideo();
  }
};

const calculatePopoverPosition = () => {
  const buttonRect = {
    bottom: triggerButton.value.$el.offsetTop + 30,
    left: triggerButton.value.$el.offsetLeft,
    top: triggerButton.value.$el.offsetTop,
    right: triggerButton.value.$el.offsetRight,
  };
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;

  // 预设弹窗位置
  let position = {
    top: buttonRect.bottom,
    left: buttonRect.left + 50,
  };

  // // 根据按钮位置和页面边界调整弹窗位置
  // if (buttonRect.bottom + 300 > viewportHeight) {
  //   // 如果向下弹窗超过视口底部，改为向上弹窗
  //   position.top = buttonRect.top - 300;
  // }

  // if (buttonRect.left + 300 > viewportWidth) {
  //   // 如果向右弹窗超过视口右侧，改为向左弹窗

  //   position.left = buttonRect.left - (viewportWidth - buttonRect.left);
  //   console.log(position.left, "vv1212111");
  // }
  // console.log(position, triggerButton.value.$el, "!!!!!");
  popoverPosition.value = position;
};

const closePopover = () => {
  showPopover.value = false;
};

const emit = defineEmits(["cancel", "delectPoint", "closePop"]);
// 判断是否为编辑模式
const model = UseModel();
// 监控是否处于点位编辑模式
const pointEdit = computed(() => {
  return model.$state.edit;
});
const Model = computed(() => {
  return model.$state.model;
});
const alertDetailStore = useAlertDetailStore();
const props = defineProps({
  options: {
    type: Object,
    default: () => ({}),
  },
  visible: {
    type: Boolean,
    default: false,
  },
});

const usetab = UseTab();
const TabIndex = computed(() => {
  return usetab.$state.Tab;
});
const tabType = ref();
const showPoint = ref(true);
const pointStatus = ref("");
const pointHandle = ref("");
const pointAll = ref(false);
const initData = () => {
  showPoint.value = true;
  pointStatus.value = "";
  pointHandle.value = "";
};
const pointData = ref([]);
const dataByStatus = (status: string) => {
  tabType.value = status;
};
watch(
  () => TabIndex.value,
  (newVal) => {
    switch (newVal) {
      case 1:
        tabType.value = "onLine";

        break;
      case 2:
        tabType.value = "outLine";
        break;
      case 3:
        tabType.value = "0";
        break;
      case 4:
        tabType.value = "all";
        break;
    }
  },
  { immediate: true, deep: true }
);

const {
  name,
  location,
  position,
  popoverVisible,
  wsMsg,
  status,
  equipmentLocationCode,
  id,
  type,
  eqModel,
  eqCode,
  direction,
  hasAi,
} = toRefs(props.options);
const videoPlayerRef = ref();
const urlSrc = ref();
const activated = computed(() => {
  return props.options.wsMsg[0].handleStatus === "0";
});
// 用isPlay来控制切换告警时销毁视频流
const isPlay = ref(false);
const videoStatus = ref();
const controlItem = ref();
const selectIcon = (status1) => {
  console.log("111111111111111", props.options);

  if (activated.value) {
    switch (type.value) {
      case "监控设备":
        switch (eqModel.value) {
          case "枪机":
            switch (direction.value) {
              case "up":
                return "eqIcon/alert/枪机北_告警";
              case "left":
                return "eqIcon/alert/枪机西_告警";
              case "right":
                return "eqIcon/alert/枪机东_告警";
              case "down":
                return "eqIcon/alert/枪机南_告警";
            }
            break;
          case "球机":
            return "eqIcon/alert/球机_告警";
          case "鹰眼":
            return "eqIcon/alert/鹰眼_告警";
        }
      case "广播设备":
        return "eqIcon/alert/广播_告警";
    }
  } else {
    if (status1 == "onLine") {
      switch (type.value) {
        case "监控设备":
          switch (eqModel.value) {
            case "枪机":
              if (!hasAi.value) {
                switch (direction.value) {
                  case "up":
                    return "eqIcon/online/枪机算法北";
                  case "left":
                    return "eqIcon/online/枪机算法西";
                  case "right":
                    return "eqIcon/online/枪机算法东";
                  case "down":
                    return "eqIcon/online/枪机算法南";
                }
              } else {
                switch (direction.value) {
                  case "up":
                    return "eqIcon/online/枪机北";
                  case "left":
                    return "eqIcon/online/枪机西";
                  case "right":
                    return "eqIcon/online/枪机东";
                  case "down":
                    return "eqIcon/online/枪机南";
                }
              }
              break;
            case "球机":
              if (hasAi.value) {
                return "eqIcon/online/球机";
              } else {
                return "eqIcon/online/球机算法";
              }
            case "鹰眼":
              return "鹰眼";
          }
        case "广播设备":
          return "广播点位";
      }
    } else if (status1 == "outLine") {
      switch (type.value) {
        case "监控设备":
          switch (eqModel.value) {
            case "枪机":
              switch (direction.value) {
                case "up":
                  return "eqIcon/outline/枪机北_离线";
                case "left":
                  return "eqIcon/outline/枪机西_离线";
                case "right":
                  return "eqIcon/outline/枪机东_离线";
                case "down":
                  return "eqIcon/outline/枪机南_离线";
              }
              break;
            case "球机":
              return "eqIcon/outline/球机_离线";
            case "鹰眼":
              return "eqIcon/outline/鹰眼_离线";
          }
        case "广播设备":
          return "eqIcon/outline/广播_离线";
      }
    }
    // if (status1 == 'onLine' && type.value == '监控设备') {
    //     return '枪机'
    // } else if (status1 == 'outLine' && type.value == '监控设备') {
    //     return '枪机_离线'
    // } else if (status1 == 'onLine' && type.value == '广播设备') {
    //     return '广播点位'
    // } else if (status1 == 'outLine' && type.value == '广播设备') {
    //     return '广播_离线'
    // }
  }
};
const field = ref("");
const GETCONTROLITEM = async (id) => {
  // let res = (await getEqControlItem(id)) as any;
  // if (res.code == 200) {
  //   let data = {
  //     ...res.data[0],
  //     equipmentId: id,
  //   };
  //   controlItem.value = data;
  //   field.value = res.data[0].execParams[0].field;
  // }
};

const getVideoUrl = async (id: any) => {
  let res = (await getRtsp(id)) as any;
  if (res.code == 200) {
    console.log("播放视频中");
    isPlay.value = true;
    urlSrc.value = res.data;
  }
};

const chooseItem = async (item: any) => {
  showDetail.value = false;
  const testclose = (options, index) => {
    return () => closeDialog(options, index);
  };

  // 已处理变为查看
  popoverVisible.value = false;
  let id = item;
  // let res = (await getAlertMessageDetail(id)) as any;

  // if (res.code == 200) {
  //   getEqDetails(res.data.businessId).then((res1) => {
  //     let alertMessage = {
  //       equipmentId: res.data.businessId,
  //       alertMessageId: res.data.id,
  //       alertContent: res.data.alertContent,
  //       alertGrade: res.data.alertGrade,
  //       handleStatus: res.data.handleStatus,
  //       imgFlag: res.data.imgFlag,
  //       equipmentName: res.data.equipmentName,
  //       equipmentType: res.data.equipmentType,
  //       equipmentLocation: res1.data.equipmentLocation,
  //       imageUrl: res.data.imageUrl,
  //       timeOfDuration: res.data.timeOfDuration,
  //       equipmentLocationCode: res1.data.equipmentLocationCode
  //         ? res1.data.equipmentLocationCode
  //         : "",
  //       alertToneUrl: null,
  //       latestAlertTime: res.data.latestAlertTime,
  //       alertType: null,
  //       id: null,
  //     };

  //     useAlertDetailStore().SetMessage(alertMessage);
  //     addDialog({
  //       contentRenderer: ({ options, index }) => (
  //         <alertDialog closeFn={testclose(options, index)}> </alertDialog>
  //       ),
  //       class: "alertDialog",
  //       headerRenderer: ({ close, titleId, titleClass }) => (
  //         // jsx 语法
  //         <reHeader
  //           headerId={titleId}
  //           headerClass={titleClass}
  //           closeFn={close}
  //           headerTitle={"处理告警"}
  //         >
  //           {" "}
  //         </reHeader>
  //       ),
  //       hideFooter: true,
  //     });
  //   });
  // }
};
const actionShow = (show: any, value: any) => {
  if (isBoolean(show)) {
    return show;
  } else if (isFunction(show)) {
    return show(value);
  } else {
    return true;
  }
};

const showVideo = async () => {
  // if (
  //   Model.value == "dashboard" &&
  //   !pointEdit.value &&
  //   type.value != "广播设备"
  // ) {
  //   const { id, url1, status } = (
  //     await getEqByCode(equipmentLocationCode.value)
  //   ).data;
  //   if (!activated.value && id && status == "1") {
  //     if (popoverVisible) {
  //       // GETCONTROLITEM(id);
  //       // getVideoUrl(id);
  //     }

  //     // if (url1) {
  //     //     urlSrc.value = url1
  //     //     isPlay.value = true
  //     // } else {
  //     //     getVideoUrl(id)
  //     // }
  //   }
  // }
};
const controlEQ = async (command) => {
  // let execParams = {};
  // execParams[field.value] = command;
  // if (controlItem.value && controlItem.value.id) {
  //   let queryForm = {
  //     controlId: controlItem.value.id,
  //     equipmentId: controlItem.value.equipmentId,
  //     execParams,
  //   };
  //   let res = (await executeGatewayControl(
  //     controlItem.value.id,
  //     queryForm
  //   )) as any;
  //   if (res.code === 200) {
  //   }
  // } else {
  //   ElMessage.warning("该设备不是云台设备");
  // }
};

const switchErrorAlert = (arr: []) => {
  if (arr.length <= 0) {
    return;
  }
  errorAlert.value = [];
  arr.forEach((item: any) => {
    if (item.alertGrade == "ERROR") {
      errorAlert.value.push(item);
    }
  });
};

const eqIcon = ref("");
const errorAlert = ref([]);
const showAlertVideo = ref(false);
watch(
  () => props.options,
  (newVal) => {
    eqIcon.value = selectIcon(newVal.status);

    switchErrorAlert(wsMsg.value);
  },
  {
    deep: true,
    immediate: true,
  }
);
onUnmounted(() => {
  popoverVisible.value = false;
  flag.value = false;
  console.log("vv12");
  isPlay.value = false;
});
onMounted(() => {
  console.log("卸载vv12");
});
onBeforeMount(() => {
  // showVideo()
});
const locationEq = useLocationEq();
const { eqData } = storeToRefs(locationEq);
const Editselect = (item) => {
  if (Model.value == "edit") {
    console.log("设备赋值。。。。。。。", item);

    name.value = item.name;
    popoverVisible.value = false;
    location.value = item.location;
    equipmentLocationCode.value = item.equipmentLocationCode;
    id.value = item.id;
    eqCode.value = item.eqCode;
  }
};

const cancel = () => {
  const editId = props.options.editId;
  popoverVisible.value = false;

  emit("cancel", editId);
};
// 点位配置右键菜单
const showContextMenu = () => {
  if (Model.value == "edit") {
    if (!equipmentLocationCode.value) {
      return;
    } else {
      emit("delectPoint", equipmentLocationCode.value);
    }
  }
};
const switchControl = (str) => {
  // switch (str) {
  //   case "上":
  //     controlEQ("UP");
  //     break;
  //   case "下":
  //     controlEQ("DOWN");
  //     break;
  //   case "左":
  //     controlEQ("LEFT");
  //     break;
  //   case "右":
  //     controlEQ("RIGHT");
  //     break;
  //   case "减焦距":
  //     controlEQ("ZOOM_OUT");
  //     break;
  //   case "加焦距":
  //     controlEQ("ZOOM_IN");
  //     break;
  //   default:
  //     break;
  // }
};
const selectValue = ref();
watch(
  () => popoverVisible.value,
  (newVal) => {
    if (newVal) {
      emits.on("HANDEL_GIMBAL", switchControl);
    } else {
      emits.off("HANDEL_GIMBAL", switchControl);
      showAlertVideo.value = false;
    }
  }
);

const getAlertVideo = async () => {
  // showAlertVideo.value = !showAlertVideo.value;
  // const { id, url1, status } = (
  //   await getEqByCode(equipmentLocationCode.value)
  // ).data;
  // await getVideoUrl(id);
};
const visible = ref(false);
const handleDblClick = () => {
  visible.value = true;
};
const flag = ref(true);
// 12/22
const showDetail = ref(false);
const msg = ref();
// 选择告警等级
const selectAlertGrade = (item) => {
  switch (item) {
    case "ERROR":
      return "紧急";
      break;
    case "WARN":
      return "警告";
      break;
    case "INFO":
      return "提示";
      break;
  }
};
const selectAlertGradeStyle = (item) => {
  switch (item) {
    case "ERROR":
      return "color:rgba(224, 73, 40, 1);background-color:rgba(224, 73, 40, 0.20);border: 1px solid rgba(224, 73, 40, 1);";
    case "WARN":
      return "color:rgba(255, 230, 101, 1);background-color:rgba(255, 230, 101, 0.20);border: 1px solid rgba(255, 230, 101, 1);";
    case "INFO":
      return "color:rgba(107, 228, 255, 1);background: rgba(107, 228, 255, 0.20);border: 1px solid rgba(107, 228, 255, 1);";
  }
};
const setWSMsg = (item) => {
  msg.value = item;
  showDetail.value = true;
  chooseItem(item.alertMessageId);
};
const closePopovers = () => {
  popoverVisible.value = false;
  showDetail.value = false;
};
const showAi = ref(false);
const alMessageDetail = ref();
const aiDetailList = ref([]);
const showAIdetail = async () => {
  console.log("show!!", showAi.value);

  if (hasAi.value && !popoverVisible.value) {
    if (showAi.value) {
      return;
    }
    // const res = await getGeneralValues([
    //   {
    //     code: "AI_ALERT_MESSAGE_NUMBER_COUNT",
    //     params: { equipmentId: id.value.toString() },
    //   },
    // ]);
    // if (res.data && res.data["AI_ALERT_MESSAGE_NUMBER_COUNT"]) {
    //   aiDetailList.value = res.data["AI_ALERT_MESSAGE_NUMBER_COUNT"].data;
    // }

    switch (name.value) {
      case "可燃气体报警仪":
        aiDetailList.value = [
          {
            algorithmName: "可燃气体浓度检测",
            count: 5
          }
        ]
        break;
      case "四氯化碳报警仪":

        aiDetailList.value = [
          {
            algorithmName: "四氯化碳浓度检测",
            count: 3
          }
        ]
        break;
    }


    if (aiDetailList.value.length > 0) {
      emit("closePop");
      showAi.value = true;
      calculatePopoverPosition();
    }
  }
};
const hidenAIdetail = (e) => {
  console.log(alMessageDetail.value, "eeee");

  if (e.toElement == alMessageDetail.value) {
    return;
  } else {
    if (hasAi.value) {
      showAi.value = false;
    }
  }
};

const alertSelect = [
  {
    value: "",
    label: "全部",
  },
  {
    value: "WARN",
    label: "告警",
  },
  {
    value: "ERROR",
    label: "紧急",
  },
];
const alertSelectValue = ref("");
const selectChange = () => {
  console.log(alertSelectValue.value);
};
defineExpose({
  showAi,
});
</script>

<template>
  <template v-if="wsMsg[0].handleStatus == tabType || status == tabType || tabType == 'all'
    ">
    <pointErrorBox :position="position" :alert-message="errorAlert" v-if="Model == 'dashboard'"></pointErrorBox>
    <device-mark :warning="activated" :icon="eqIcon" :position="position" :eqName="eqCode" :direction="direction"
      :status="status" @contextmenu.prevent.stop="showContextMenu" @click="togglePopover" @mouseover="showAIdetail"
      @mouseleave="hidenAIdetail" ref="triggerButton" />
  </template>

  <CustomPopover v-if="popoverVisible" :position="popoverPosition" @close="closePopover">
    <!-- Popover 内容 -->
    <!-- 关闭弹框时，销毁内部元素 -->
    <div v-if="popoverVisible">
      <template v-if="popoverVisible">
        <!-- 告警内容 -->
        <div v-if="activated &&
    msg &&
    msg.imageUrl &&
    type != '广播设备' &&
    Model == 'dashboard' &&
    false
    " class="device-alert-view">
          <div class="device-alert-content">
            <div class="content-top">
              <div class="alert-content">
                <div class="alert-content-title">
                  <el-tag v-if="msg.alertGrade" round size="small" :type="alertGradeOptions[msg.alertGrade]?.tagType">
                    {{ alertGradeOptions[msg.alertGrade]?.name }}
                  </el-tag>
                  <div class="duration">
                    持续时间: {{ formatDuration(msg.timeOfDuration) }}
                  </div>
                </div>
              </div>
            </div>
            <div class="content-bottom">
              <div class="alert-content-desc">{{ msg.alertContent }}</div>
              <div class="device-name">设备名称：{{ name }}</div>
              <div class="device-location">设备位置：{{ location }}</div>
              <div class="btn">
                <el-button type="primary" @click="chooseItem(msg.alertMessageId)">
                  处理
                </el-button>
                <el-button type="primary" style="color: rgba(38, 190, 255, 1);border: 1px solid rgba(38, 190, 255, 1);"
                  color="rgba(10, 47, 64, 1)" @click="getAlertVideo">
                  {{ showAlertVideo ? "关闭视频流" : "获取视频流" }}
                </el-button>
              </div>
            </div>
          </div>
          <div v-if="msg && msg.imageUrl" class="device-alert-screenshot">
            <img :src="msg.imageUrl" @dblclick="handleDblClick" />
            <div class="alert-video" v-if="showAlertVideo">
              <!-- <VideoPlayer v-if="urlSrc" :showDetail="false" :type="1" ref="videoPlayerRef" :src="urlSrc"
                :status="isPlay" /> -->
              <!-- <img :src="requireImgUrl('image', '气体报警')" alt=""> -->
            </div>
          </div>
          <div class="close" style="margin-left: auto;position: absolute;right: 0;top: 0;" @click="closePopovers">
            <el-icon>
              <Close />
            </el-icon>
          </div>
        </div>
        <div v-if="activated &&
    msg &&
    !msg.imageUrl &&
    type != '广播设备' &&
    Model == 'dashboard' &&
    false
    " class="device-alert-view noimage">
          <div class="device-alert-content">
            <div class="content-top">
              <div class="alert-content">
                <div class="alert-content-title">
                  <el-tag v-if="msg.alertGrade" round size="small" :type="alertGradeOptions[msg.alertGrade]?.tagType">
                    {{ alertGradeOptions[msg.alertGrade]?.name }}
                  </el-tag>
                  <div class="duration">
                    持续时间: {{ formatDuration(msg.timeOfDuration) }}
                  </div>
                  <div class="close" style="margin-left: auto;" @click="closePopovers">
                    <el-icon>
                      <Close />
                    </el-icon>
                  </div>
                </div>
              </div>
            </div>
            <div class="content-bottom" style="margin-top: clamp(1.25rem, 1.04vw, 2.5rem);">
              <div class="alert-content-desc">{{ msg.alertContent }}</div>
              <div class="device-name">设备名称：{{ name }}</div>
              <div class="device-location">
                设备位置：{{ location }}
                <div class="btn">
                  <el-button type="primary" @click="chooseItem(msg.alertMessageId)">
                    处理
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="!activated &&
    status == 'outLine' &&
    type != '广播设备' &&
    Model == 'dashboard'
    " class="device-alert-view device-outline-view">
          <div class="device-alert-content">
            <div class="content-bottom">
              <div class="device-name">设备名称：{{ name }}</div>
              <div class="device-location">设备位置：{{ location }}</div>
            </div>

            <div class="status-box">
              <div class="eqStatus">
                离线
              </div>
            </div>
            <div class="close" style="margin-left: auto;" @click="closePopovers">
              <el-icon>
                <Close />
              </el-icon>
            </div>
          </div>
        </div>
        <div v-else-if="!activated &&
    status == 'onLine' &&
    equipmentLocationCode &&
    type != '广播设备' &&
    Model == 'dashboard' &&
    !showAi
    " class="device-alert-view device-static-view">
          <!-- <img src="../../assets/image/dashboard/static-top.png" alt="" class="top">
                <img src="../../assets/image/dashboard/static-down.png" class="down"> -->
          <div class="device-view-header">
            {{ location }}#{{ name }}
            <div class="close" style="margin-left: auto;" @click="closePopovers">
              <el-icon>
                <Close />
              </el-icon>
            </div>
          </div>
          <div class="device-view-body">
            <div class="device-alert-screenshot">
              <!-- <VideoPlayer v-if="urlSrc" :showDetail="false" :type="1" ref="videoPlayerRef" :src="urlSrc"
                :status="isPlay" /> -->
              <img :src="requireImgUrl('image', '气体报警')" alt="">
            </div>
            <div class="device-alert-content">
              <div class="content-bottom">
                <!-- <Gimbal></Gimbal> -->
                <div class="test-content">
                  <span>气体浓度：</span><span>20&nbsp;PPM</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="!equipmentLocationCode" class="device-alert-view edit-box">
          <div class="eq-select">
            <Cselect :formData="eqData" :label="'name'" :eqModel="eqModel" @onSelect="Editselect" @cancel="cancel">
            </Cselect>
          </div>
        </div>
        <div class="device-alert-list" v-else-if="activated && wsMsg && wsMsg.length > 2 && !showDetail">
          <div class="list-title">
            告警明细
            <el-icon @click="closePopovers">
              <Close />
            </el-icon>
          </div>
          <div class="alert-select">
            <el-select v-model="alertSelectValue" @change="selectChange">
              <el-option v-for="item in alertSelect" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="list-content" v-scroll.mouse>
            <div class="alert-list-item" v-for="(alert, index) in wsMsg" v-show="alert.id &&
    (alert.alertGrade == alertSelectValue ||
      alertSelectValue == '')
    ">
              <div class="alert-list-items" v-if="alert.id">
                <div class="error-lv" :style="selectAlertGradeStyle(alert.alertGrade)">
                  {{ selectAlertGrade(alert.alertGrade) }}
                </div>
                <div class="eq-id">{{ eqCode }}</div>
                <div class="item-alert-content">{{ alert.alertContent }}</div>
                <div class="alert-time">
                  {{ alert.alertTime.split(" ")[1] }}
                </div>
                <div class="handle-btn" @click="setWSMsg(alert)">
                  处理<el-icon>
                    <ArrowRight />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 常规内容 Mock数据-->
      </template>
    </div>
  </CustomPopover>
  <CustomPopover v-if="!activated &&
    status == 'onLine' &&
    equipmentLocationCode &&
    type != '广播设备' &&
    Model == 'dashboard' &&
    showAi &&
    !popoverVisible
    " :position="popoverPosition">
    <div class="alMessage-detail" ref="alMessageDetail" @mouseleave="hidenAIdetail" v-scroll.mouse>
      <div class="detail-header">设备：{{ eqCode }}</div>
      <div class="detail-box" v-if="aiDetailList.length > 0">
        <div class="detail-item" v-for="(item, index) in aiDetailList">
          <div class="aiName">
            {{ item.algorithmName }}
          </div>
          <div class="aicount">{{ item.count }}次</div>
        </div>
      </div>
    </div>
  </CustomPopover>
  <!-- 增加用于显示预览图片 -->
  <ImgPreview v-model="visible" :imgs="[wsMsg[0].imageUrl]" />
</template>

<style scoped lang="scss">
.content-bottom {
  font-size: clamp(0.875rem, 0.73vw, 1.75rem);


  .test-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1rem, 0.83vw, 2rem);
  }
}

.content-top {
  font-size: clamp(1.875rem, 1.56vw, 3.75rem);
}

.top {
  position: absolute;
  top: -10%;
  left: -5%;
  transform: translate(5%, 10%);
  width: clamp(9.688rem, 8.07vw, 19.375rem);
  height: clamp(2.75rem, 2.29vw, 5.5rem);
}

.down {
  position: absolute;
  bottom: -10%;
  right: -5%;
  transform: translate(-5%, -10%);
  width: clamp(9.688rem, 8.07vw, 19.375rem);
  height: clamp(2.75rem, 2.29vw, 5.5rem);
}

.btn {
  margin-top: clamp(0.625rem, 0.52vw, 1.25rem);
}

.content-bottom {
  .alert-content-desc {
    font-size: clamp(1rem, 0.83vw, 2rem);
    margin-bottom: 20px;
  }

  &>div:first-child {
    margin-bottom: 20px;
  }
}

.device-alert-view {
  position: relative;
  color: #ffffff;
  padding: clamp(1rem, 0.83vw, 2rem);
  display: flex;
  background-color: rgba(6, 30, 41, 0.9);
  box-sizing: border-box;
  width: fit-content;
  // min-width: clamp(38.938rem, 32.45vw, 77.875rem);
  height: clamp(15.063rem, 12.55vw, 30.125rem);
  border: 2px solid #e04928;

  .device-alert-content {
    width: clamp(15.25rem, 12.71vw, 30.5rem);
    display: flex;
    flex-direction: column;
    justify-content: start;
  }

  .device-alert-screenshot {
    width: fit-content;
    display: flex;

    img {
      width: clamp(22.688rem, 18.91vw, 45.375rem);
      height: 100%;
    }

    .alert-video {
      width: clamp(22.688rem, 18.91vw, 45.375rem);
      height: clamp(12.813rem, 10.68vw, 25.625rem);

    }
  }

  .device-alert {
    &-content {
      box-sizing: border-box;

      .content-top {
        height: clamp(1.875rem, 1.56vw, 3.75rem);
        margin-bottom: 5px;

        img {
          float: left;
          margin: 0 18px 0 12px;
        }

        .alert-content {
          margin-bottom: 20px;

          &-title {
            display: flex;
            align-items: center;
            margin-bottom: clamp(0.25rem, 0.21vw, 0.5rem);

            .duration {
              font-size: clamp(0.875rem, 0.73vw, 1.75rem);
              margin-left: clamp(0.5rem, 0.42vw, 1rem);
            }
          }

          &-desc {
            font-size: clamp(1rem, 0.83vw, 2rem);
            margin-bottom: 20px;
          }
        }
      }
    }

    &-screenshot {
      margin-left: clamp(1.5rem, 1.25vw, 3rem);

      img {
        display: block;
        max-width: 100%;
        height: 100%;
      }
    }
  }
}

.noimage {
  width: clamp(21.375rem, 16.15vw, 42.75rem);

  .device-alert-content {
    flex: 1;
  }

  .device-location {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;

    .btn {}
  }
}

.device-outline-view {
  border: 2px solid #c8e4fa;
  width: clamp(18.563rem, 15.47vw, 37.125rem);
  height: clamp(7.5rem, 6.25vw, 15rem);

  .device-alert-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    width: 100%;

    .content-bottom {
      flex: 0.8;
    }

    .status-box {
      flex: 0.2;
      justify-content: right;
      align-items: center;

      .eqStatus {
        display: flex;
        justify-content: center;
        align-items: center;
        width: clamp(2.813rem, 2.34vw, 5.625rem);
        height: clamp(1.5rem, 1.25vw, 3rem);
        background: rgba(136, 136, 136, 0.4);
        font-size: clamp(0.75rem, 0.63vw, 1.5rem);
        color: rgba(204, 204, 204, 1);
      }
    }
  }

  .top {
    position: absolute;
    top: -30%;
    left: -10%;
    transform: translate(10%, 30%);
    width: clamp(9.688rem, 8.07vw, 19.375rem);
    height: clamp(2.75rem, 2.29vw, 5.5rem);
  }

  .down {
    position: absolute;
    bottom: -30%;
    right: -10%;
    transform: translate(-10%, -30%);
    width: clamp(9.688rem, 8.07vw, 19.375rem);
    height: clamp(2.75rem, 2.29vw, 5.5rem);
  }
}

.device-static-view {
  width: fit-content;
  min-width: clamp(37.688rem, 31.41vw, 75.375rem);
  border: 2px solid rgba(38, 190, 255, 1);
  flex-direction: column;

  .device-view-header {
    color: #26beff;
    flex: 0.2;
    font-size: clamp(1rem, 0.83vw, 2rem);
    margin-top: -10px;
    display: flex;
    width: 100%;
  }

  .device-view-body {
    flex: 0.8;
    display: flex;
    width: 100%;

    .device-alert-screenshot {
      flex: 0.7;
      padding-top: 10px;
      padding-bottom: 10px;
      box-sizing: border-box;
      margin-left: 0;
      margin-right: clamp(1.5rem, 1.25vw, 3rem);
      // background-color: pink;

      img {
        width: 100%;
        height: 55%;
      }
    }

    .device-alert-content {
      flex: 0.3;

      .content-bottom {
        width: clamp(12.5rem, 10.42vw, 25rem);
        height: clamp(12.5rem, 10.42vw, 25rem);

        .gimbal {
          transform-origin: center center;
          transform: translate(-0%, -5%) scale(0.9);
        }
      }
    }
  }
}

.device-normal-view {
  color: var(--theme-text-color);
  min-width: 240px;

  .device-normal-header {
    background-color: rgba(9, 47, 64, 0.9);
    padding: 10px 16px;
    line-height: 24px;
  }

  .device-normal-main {
    .video-player-wrapper {
      height: clamp(16.25rem, 13.54vw, 32.5rem);
      width: clamp(23.75rem, 19.79vw, 47.5rem);
      background-color: #000;
    }

    :deep(.el-descriptions) {
      margin: 4px 16px;

      &:not(:last-child) {
        border-bottom: 1px solid #4e4e4e;
      }

      .el-descriptions__header {
        margin: 0 0 0 -6px;

        .el-descriptions__title {
          font-size: 14px;
          font-weight: normal;
          line-height: 18px;
          color: rgb(255, 255, 255, 0.6);
        }
      }

      .el-descriptions__body {
        background-color: transparent;

        .el-descriptions__cell {
          padding-bottom: 0;
          // line-height: 18px;

          .el-descriptions__label,
          .el-descriptions__content {
            color: rgb(255, 255, 255, 0.6);
          }

          .el-descriptions__label {
            margin-right: 8px;

            &::after {
              content: ":";
              margin-left: 2px;
            }
          }

          .el-descriptions__content {
            .action-bar {
              float: right;

              &>div {
                margin-left: 8px;
              }
            }
          }

          &:not(:last-child) {
            .el-descriptions__content {
              margin-right: 18px;
            }
          }
        }
      }
    }
  }
}

// 设备配置框
.edit-box {
  width: clamp(23.625rem, 19.69vw, 47.25rem);
  height: fit-content;
  padding: clamp(1.313rem, 1.09vw, 2.625rem);
  box-sizing: border-box;
  border: none;
  background-color: rgba(4, 19, 31, 0.9);

  .eq-select {
    display: flex;
    width: 100%;
  }
}

.device-alert-list {
  width: clamp(22.063rem, 18.39vw, 44.125rem);
  height: clamp(16.938rem, 14.11vw, 33.875rem);
  background-color: rgba(4, 19, 31, 0.9);
  padding: clamp(1rem, 0.83vw, 2rem);
  box-sizing: border-box;
  border: solid 2px rgba(229, 14, 14, 1);

  .list-title {
    color: rgba(38, 190, 255, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .alert-select {
    margin-top: 1em;
  }

  .list-content {
    height: 70%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .alert-list-item {
      flex: 0.2;
      width: 100%;
      display: flex;
      color: #ffffff;

      .alert-list-items {
        width: 100%;
        height: 100%;
        display: flex;
        color: #ffffff;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .error-lv {
          flex: 0.12;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .eq-id {
          flex: 0.2;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .item-alert-content {
          flex: 0.3;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .alert-time {
          flex: 0.19;
        }

        .handle-btn {
          flex: 0.15;
          color: rgba(38, 190, 255, 1);
          cursor: pointer;
        }
      }
    }
  }
}

.alMessage-detail {
  width: clamp(18rem, 15vw, 36rem);
  height: clamp(12.625rem, 10.52vw, 25.25rem);
  background-color: rgba(6, 30, 41, 0.9);
  border: 2px solid rgba(38, 190, 255, 1);
  padding: clamp(1.125rem, 0.94vw, 2.25rem);
  box-sizing: border-box;

  .detail-header {
    color: rgba(38, 190, 255, 1);
  }

  .detail-box {
    width: 100%;
    margin-top: 20px;
    height: 80%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    scrollbar-width: none;
    cursor: pointer;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    &::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .detail-item {
      height: 20%;
      align-items: center;
      width: 100%;
      display: flex;
      color: #ffffff;
      font-size: clamp(1rem, 0.83vw, 2rem);

      .aiName {
        flex: 0.8;
        color: rgba(207, 241, 255, 1);
      }

      .aicount {
        flex: 0.3;
      }
    }
  }
}
</style>
